<template>
  <div class="user-base-info card card-color card-margin">
    <div class="head-item card-header"><i class="el-icon-info" />&nbsp;关于我</div>
    <div class="user-base-avatar">
    <el-image
      style="width: 80px; height: 80px"
      :src="avatarUrl"
      :fit="'cover'"></el-image>
    </div>
    <div><h1>云海梦尘</h1></div>
    <div style="width: 100%;height: 0;border-top: 1px dashed rgb(107, 107, 107);"></div>
    <div class="user-item-content">
      <div class="user-item-content-item">网名：云海梦尘</div>
      <div class="user-item-content-item">职业：Java软件开发</div>
      <div class="user-item-content-item">邮箱：2523208472@qq.com</div>

      <div class="user-item-link">
        <div @click="toUrl('https://support.qq.com/products/14800')">
          <icon-svg icon-class="QQ" />
        </div>
        <div @click="toUrl('https://blog.csdn.net/qq2523208472')"><icon-svg icon-class="csdn" /></div>
        <div @mouseenter="showWeiXin=!showWeiXin" @mouseleave="showWeiXin=!showWeiXin">
          <icon-svg icon-class="weixin" />
          <div v-if="showWeiXin" class="tips"><span>微信</span><div class="weixin-image"></div></div>
        </div>
        <div  @mouseenter="showDingYueHao=!showDingYueHao" @mouseleave="showDingYueHao=!showDingYueHao">
          <icon-svg icon-class="dingyuehao" />
          <div v-if="showDingYueHao" class="tips"><span>订阅号</span><div class="weixin-dingyue-image"></div></div>
        </div>
        <div @click="toUrl('https://gitee.com/zhangdanmgr')"><icon-svg icon-class="github" /></div>
      </div>

    </div>
<!--    <div class="user-item-content">-->
<!--      <ul class="user-other-list">-->
<!--        <li><a href="https://gitee.com/zhangdanmgr" target="_blank">云海梦尘&lt;gitee&gt;</a></li>-->
<!--        <li><a href="https://blog.csdn.net/qq2523208472" target="_blank">云海梦尘&lt;csdn&gt;</a></li>-->
<!--        <li><a href="https://www.jianshu.com/u/502970a658cc" target="_blank">云海梦尘&lt;简书&gt;</a></li>-->
<!--        <li><a href="http://www.ouchn.cn/" target="_blank">我的大学&lt;国开&gt;</a></li>-->
<!--        <li><a href="https://zk.zjzs.net/Index/index.aspx" target="_blank">我的自考&lt;浙自考&gt;</a></li>-->
<!--      </ul>-->
<!--    </div>-->
  </div>
</template>
<style>
  .user-item-content {
    padding:5px;
  }

  .user-item-content-item {
    font-size: 1.2em;
    text-align: left;
    padding: 5px 0 5px 15px;
  }

  .user-item-link {
    display: flex;
  }

  .user-item-link >div {
    font-size: 1.8em;
    width:25px;
    height:25px;
    text-align: left;
    margin: 15px 0 5px 15px;
    position: relative;
  }

  .user-item-link >div:hover {
    font-size: 2em;
  }

  .tips {
    background-color: white;
    width: 200px;
    height: 200px;
    top: -250px;
    position: relative;
    text-align: center;
    z-index: 99;
  }

  .weixin-dingyue-image {
    background-image: url("../../assets/img/qrcode_for_gh_ee031f4ce78b_258.jpg");
    width:150px;
    height:150px;
    background-repeat: round;
    margin:0 auto;
  }

  .weixin-image {
    background-image: url("../../assets/img/weixin.jpg");
    width:150px;
    height:150px;
    background-repeat: round;
    margin:0 auto;
  }

  .user-other-list {
    list-style:square url("../../assets/img/sqpurple.gif");
  }

  .user-other-list > li {
    padding: 2px 0 2px 15px;
    text-align: left;
  }
</style>
<script>
import IconSvg from '../../components/icon'
export default {
  name: 'user',
  components: {
    IconSvg
  },
  data: function () {
    return {
      showDingYueHao: false,
      showWeiXin: false,
      avatarUrl: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2688197080,1439850754&fm=15&gp=0.jpg'
    }
  },
  methods: {
    toUrl: function (url) {
      window.open(url, '_bank')
    }
  }
}
</script>
